<template>
    <div class="vchat-login" >
         <canvas id="canvas" style="background-color: #34393b"></canvas>
        <div class="title1">
            <h3>❤你好，可以交个朋友吗❤</h3>
        </div>
        <div class="sign" v-if="showSign">
            <div class="title">
                <span :class="{active: islogin}" @click="choose(true)">登录</span>
                <span :class="{active: !islogin}" @click="choose(false)">注册</span>
            </div>
            <el-form ref="signForm" label-width="80px" class="signForm" :rules="signRules" :model="signForm">
                <el-form-item prop="name">
                    <el-input v-model="signForm.name" placeholder="账号">
                        <i class="iconfont icon-zhanghao" slot="prepend"></i>
                    </el-input>
                </el-form-item>

                <el-form-item prop="pass">
                    <el-input v-model="signForm.pass" placeholder="密码" type="password" @keyup.enter.native="enter(islogin)">
                        <i class="iconfont icon-mima3" slot="prepend"></i>
                    </el-input>
                </el-form-item>

                <el-form-item prop="repass" v-if="!islogin">
                    <el-input v-model="signForm.repass" placeholder="确认密码" type="password" @keyup.enter.native="enter(islogin)">
                        <i class="iconfont icon-mima2" slot="prepend"></i>
                    </el-input>
                </el-form-item>

                <!-- <el-form-item prop="regcode" class="regcode-box">
                    <el-input v-model="signForm.regcode" placeholder="验证码" @keyup.enter.native="enter(islogin)">
                        <i class="iconfont icon-mima3" slot="prepend"></i>
                    </el-input>
                    <canvas ref="regcode" width="90" height="38"></canvas>
                </el-form-item> -->

            </el-form>
            <button @click="enter(islogin)">
                <v-icon class="el-icon-loading" color="#fff" :size="14" v-if="loading"></v-icon>
                {{islogin ? '登录' : '注册'}}
            </button>
            <div class="login-foot" v-if="islogin">
                <span></span>
                第三方登录
                <span></span>
            </div>
        </div>
    </div>
</template>

<script>
    import api from '../api';
    //import Canvas from 'vchat-regcode';
    // import bg from '../assets/img/0076.jpg';
    export default {
        name: 'login',
        data() {
            let validateName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入账号'));
                } else {
                    let reg = /^[a-zA-Z0-9_]{2,8}$/;
                    if (!reg.test(value)) {
                        callback(new Error('请输入2~8位数字字母下划线'));
                        return;
                    }
                    callback();
                }
            };
            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    let reg = /^[a-zA-Z0-9]{6,12}$/;
                    if (!reg.test(value)) {
                        callback(new Error('请输入6~12位数字字母组合'));
                        return;
                    }
                    callback();
                }
            };
            let validateRePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入确认密码'));
                } else {
                    if (value !== this.signForm.pass) {
                        callback(new Error('两次密码输入不一致'));
                        return;
                    }
                    callback();
                }
            };
            // let validateRegcode = (rule, value, callback) => {
            //     if (value === '') {
            //         callback(new Error('请输入验证码'));
            //     } else {
            //         if (value.toLowerCase() !== this.regcode.toLowerCase()) {
            //             this.regCodeClass.drawAgain();
            //             callback(new Error('验证码错误'));
            //             return;
            //         }
            //         callback();
            //     }
            // };
            return {
                signForm: {
                    name: '',
                    pass: '',
                    // regcode: '',
                    repass: ''
                },
                // bg: bg,
                IMGURL: process.env.IMG_URL,
                islogin: true, // 登录 or 注册
                showSign: true, // 登录框显示
                // regcode: '', // 验证码
                // regCodeClass: null, // 验证码类
                signRules: {
                    name: [
                        { validator: validateName, trigger: 'blur' }
                    ],
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    repass: [
                        { validator: validateRePass, trigger: 'blur' }
                    ],
                    // regcode: [
                    //     { validator: validateRegcode, trigger: 'blur' }
                    // ]
                },
                signSuccess: { // 注册成功提示框
                    code: '',
                    Visible: false
                },
                loading: false
            }
        },
        watch: {
            islogin() {
                this.regCodeClass.drawAgain();
            }
            // showSign() {
            //     if (this.showSign) {
            //         this.initRegcode();
            //     }
            // }
        },
        methods: {
            // initRegcode() {
            //     this.$nextTick(() => {
            //         this.regCodeClass = new Canvas(this.$refs['regcode'],{
            //             fontSize: 20,
            //             lineNum: 2,
            //             dotNum: 10
            //         });
            //         this.regCodeClass.draw((r) => {
            //             this.regcode = r;
            //         });
            //     })
            // },
            choose(flag) {
                this.$refs['signForm'].resetFields();
                this.islogin = flag;
            },
           
            enter(f) {
                this.$refs['signForm'].validate((valid) => {
                    if (valid) {
                        if (f) {
                            this.login();
                        } else {
                            this.signUp();
                        }
                    } else {
                        return false;
                    }
                });
            },
            login() {
                let params = {
                    name: this.signForm.name,
                    pass: this.signForm.pass
                };
                this.loading = true;
                api.login(params).then(r => {
                    if (r.code === 0) {
                        this.$message.success('登录成功');
                        this.$store.dispatch('getUserInfo', this);
                    } else if (r.code === -1) {
                        this.$message.error('账号不存在或密码错误');
                        this.loading = false;
                    } else {
                        this.$message.error('登录失败');
                        this.loading = false;
                    }
                });
            },
            signUp() {
                let params = {
                    name: this.signForm.name,
                    pass: this.signForm.pass
                };
                this.loading = true;
                api.signUp(params).then(r => {
                    if (r.code === 0) {
                        this.$refs['signForm'].resetFields();
                        this.$notify({
                            title: '注册成功',
                            message: `您的Vchat号为：${r.data}，您可以凭此登录，祝您生活愉快！`,
                            duration: 5000,
                            type: 'success'
                        });
                        this.islogin = true;
                    } else if (r.code === 1) {
                        this.$message.error('账号已存在')
                    } else {
                        this.$message.error('注册失败')
                    }
                    this.loading = false;
                });
            },
            handelClose(done) {
                this.islogin = true;
                done();
            }
        },
        mounted() {
            const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  let width = window.innerWidth
  let height = window.innerHeight
 
  let dotsNum = 79 // 点的数量
  let radius = 1 // 圆的半径，连接线宽度的一半
  let fillStyle = 'rgb(90, 250, 186)' // 点的颜色
  let lineWidth = radius * 2
  let connection = 120 // 连线最大距离
  let followLength = 80 // 鼠标跟随距离
 
  let dots = []
  let animationFrame = null
  let mouseX = null
  let mouseY = null
 
  function addCanvasSize () { // 改变画布尺寸
    width = window.innerWidth
    height = window.innerHeight
    canvas.width = width
    canvas.height = height
    ctx.clearRect(0, 0, width, height)
    dots = []
    if (animationFrame) window.cancelAnimationFrame(animationFrame)
    initDots(dotsNum)
    moveDots()
  }
 
  function mouseMove (e) {
    mouseX = e.clientX
    mouseY = e.clientY
  }
 
  function mouseOut (e) {
    mouseX = null
    mouseY = null
  }
 
  function mouseClick () {
    for (const dot of dots) dot.elastic()
  }
 
  class Dot {
    constructor(x, y) {
      this.x = x
      this.y = y
      this.speedX = Math.random() * 2 - 1
      this.speedY = Math.random() * 2 - 1
      this.follow = false
    }
    draw () {
      ctx.beginPath()
      ctx.arc(this.x, this.y, radius, 0, 2 * Math.PI)
      ctx.fill()
      ctx.closePath()
    }
    move () {
      if (this.x >= width || this.x <= 0) this.speedX = -this.speedX
      if (this.y >= height || this.y <= 0) this.speedY = -this.speedY
      this.x += this.speedX
      this.y += this.speedY
      if (this.speedX >= 1) this.speedX--
      if (this.speedX <= -1) this.speedX++
      if (this.speedY >= 1) this.speedY--
      if (this.speedY <= -1) this.speedY++
      this.correct()
      this.connectMouse()
      this.draw()
    }
    correct () { // 根据鼠标的位置修正
      if (!mouseX || !mouseY) return
      let lengthX = mouseX - this.x
      let lengthY = mouseY - this.y
      const distance = Math.sqrt(lengthX ** 2 + lengthY ** 2)
      if (distance <= followLength) this.follow = true
      else if (this.follow === true && distance > followLength && distance <= followLength + 8) {
        let proportion = followLength / distance
        lengthX *= proportion
        lengthY *= proportion
        this.x = mouseX - lengthX
        this.y = mouseY - lengthY
      } else this.follow = false
    }
    connectMouse () { // 点与鼠标连线
      if (mouseX && mouseY) {
        let lengthX = mouseX - this.x
        let lengthY = mouseY - this.y
        const distance = Math.sqrt(lengthX ** 2 + lengthY ** 2)
        if (distance <= connection) {
          let opacity = (1 - distance / connection) * 0.5
          
          ctx.strokeStyle = `rgba(255,255,255,${opacity})`
          ctx.beginPath()
          ctx.moveTo(this.x, this.y)
          ctx.lineTo(mouseX, mouseY);
          ctx.stroke();
          ctx.closePath()
        }
      }
    }
    elastic () { // 鼠标点击后的弹射
      let lengthX = mouseX - this.x
      let lengthY = mouseY - this.y
      const distance = Math.sqrt(lengthX ** 2 + lengthY ** 2)
      if (distance >= connection) return
      const rate = 1 - distance / connection // 距离越小此值约接近1
      this.speedX = 40 * rate * -lengthX / distance
      this.speedY = 40 * rate * -lengthY / distance
    }
  }
 
  function initDots (num) { // 初始化粒子
    ctx.fillStyle = fillStyle
    ctx.lineWidth = lineWidth
    for (let i = 0; i < num; i++) {
      const x = Math.floor(Math.random() * width)
      const y = Math.floor(Math.random() * height)
      const dot = new Dot(x, y)
      dot.draw()
      dots.push(dot)
    }
  }
 
  function moveDots () { // 移动并建立点与点之间的连接线
    ctx.clearRect(0, 0, width, height)
    for (const dot of dots) {
      dot.move()
    }
    for (let i = 0; i < dots.length; i++) {
      for (let j = i; j < dots.length; j++) {
        const distance = Math.sqrt((dots[i].x - dots[j].x) ** 2 + (dots[i].y - dots[j].y) ** 2)
        if (distance <= connection) {
         let opacity = (1 - distance / connection) * 0.5
     
          ctx.strokeStyle = `rgba(255,255,255,${opacity})`
          ctx.beginPath()
          ctx.moveTo(dots[i].x, dots[i].y)
          ctx.lineTo(dots[j].x, dots[j].y);
          ctx.stroke();
          ctx.closePath()
        }
      }
    }
    animationFrame = window.requestAnimationFrame(moveDots)
  }
 
  addCanvasSize()
 
  initDots(dotsNum)
  moveDots()
 
  document.onmousemove = mouseMove
  document.onmouseout = mouseOut
  document.onclick = mouseClick
  window.onresize = addCanvasSize
        }
    }
</script>

<style scoped lang="scss">
   .title1{
       margin-top: 30px;
       font-size:26px;
   }
  
    .vchat-login{
        top:0;
        left:0;
        bottom: 0;
        right: 0;
        z-index:0;
        overflow: hidden;
        position: fixed;
    }
    
    .sign{
        width: 350px;
        // height: 370px;
        padding: 15px 25px 25px;
        background-color: #fff;
        border-radius: 10px;
        box-sizing: border-box;
        position: absolute;
        left:50%;
        top:50%;
        margin-left: -175px;
        margin-top: -175px;
        animation: move 1.2s;
    }
    @keyframes move {
        0% {
            left: 0
        }
        40% {
            left: 50%;
        }
        40%, 100% {
            -webkit-transform: translate(0, 0);
        }
        50%,
        70%,
        90% {
            -webkit-transform: translate(-5px, -5px);
        }
        60%,
        80% {
            -webkit-transform: translate(5px, 5px);
        }
    }
    .sign .title{
        display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }
    .sign .title span{
        width:100px;
        border-right: 1px solid #d5d5d5;
        cursor: pointer;
    }
    .sign .title span:nth-of-type(2){
        border-right: none;
    }
    .sign .title span.active{
        color: #1fbeca;
    }
    .sign button{
        width:100%;
        border: none;
        outline: none;
        height: 36px;
        background-color: rgba(19, 164, 192, 0.82);
        color: #fff;
        border-radius: 25px;
        cursor: pointer;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .sign button:hover{
        background-color: #1fbeca;
        color: #fff;
    }
    .login-foot{
        width:100%;
        font-size: 12px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #d5d5d5;
    }
    .login-foot span{
        width:100px;
        height: 1px;
        background-color: #d5d5d5;
        display: inline-block;
        margin: 0 10px;
    }
    .regcode-box{
        .el-input{
            width:205px;
        }
        canvas{
            display: inline-block;
            vertical-align: middle;
        }
    }
</style>
